<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>径向渐变</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .box{
            width: 300px;
            height: 300px;
            box-shadow: 0 0 0 1px orange;
            margin: 50px;
            /* border-radius: 50%; */
            background: radial-gradient(
                150px 150px at center,
                aqua 0,aqua 50%,
                blue 50%,blue 100%,
                transparent 100%
            );
        }
    </style>
</head>
<body>
     <div class="box">
    <!-- 径向渐变
        径向渐变是沿着圆心位置向四周开始渐变，范围也是圆形的形状进行渐变
                background: radial-gradient(
                径向渐变的大小  at + 圆心的位置
                aqua 0,aqua 50%,
                blue 50%,blue 100%
            );
            径向渐变默认的的直径就是元素对角线的长度
            可以通过修改圆心的大小重新定义径向渐变的图案大小

            圆心的大小可以设置两个值，一个设置横轴半径，一个设置纵轴半径
            渐变的最后一个颜色会蔓延置整个容器

            圆心位置是用来调整渐变位置的
            默认是在元素的正中心 center
            调整方式可以是具体值，分别设置，x y的偏移量
     -->
     </div>
</body>
</html>